<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>品牌 </title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">添加</h3>
        </div>
        <div class="panel-body form-inline">
            <label for="">
                id: <input type="text" class="form-control" v-model="id">
            </label>
            <label for="">
                name: <input type="text" class="form-control" v-model="name" @keyup.f2="add">
            </label>
            <input type="button" value="添加" class="btn btn-primay" @click="add" >
            <label for="">
                根据关键字搜索: <input type="text" class="form-control" v-model="keywords" v-focus v-color>
            </label>
        </div>
    </div>
    <table :class="classTable">
        <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>ctime</th>
            <th>operation</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in search(keywords)" :key="item.id">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.ctime | timeFormat}}</td>
            <td>
                <a href="javascript:" @click="del(item.id)">删除</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>

</body>
<script>
    Vue.filter('timeFormat', function(time){
        var t = new Date(time);
        var year = t.getFullYear();
        var month = t.getMonth() + 1;
        var day = t.getDate();
        return `${year}-${month}-${day}`
    });
    Vue.config.keyCodes.f2 = 113;
    // 自定义指令
    /**
     * 和js相关的操作，最好放在inserted函数中去执行，防止失效。
     * 和样式相关的操作，一般都可以在bind函数执行。
     *
     */
    Vue.directive('focus', {
        // 在每个函数中，第一个参数永远是el，即为被绑定了指令的元素（原生的js对象--DOM对象）
        bind: function(el){  // 每当指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次
            // 在元素，刚绑定了指令的时候，还没有插入到DOM元素中，此时，调用focus方法没有作用
            // el.focus()
        },
        inserted: function(el){ //表示元素插入到DOM中的时候，会执行inserted函数（只触发一次）
            // 和js
            el.focus()
        },
        updated: function(el){ // VNode更新的时候，会执行updated，可触发多次

        }
    })
    Vue.directive('color',{
        // 样式， 只要通过指令绑定给了元素，不管这个元素有没有人被插入到页面中去，这个元素肯定有了一个内联样式，
        // 将来元素肯定会显示到页面中，这时候，浏览器的渲染引擎必然会解析样式，应用给这个元素
        bind: function(el){
            el.style.color = 'green';
        }
    });
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '大家好哈哈哈哈，你们好啊。',
            classTable: ['table', 'table-bordered', 'table-hover', 'table-striped'],
            id: '',
            name: '',
            keywords: '',
            list: [
                {id: 1, name: '奔驰', ctime: new Date()},
                {id: 2, name: '宝马', ctime: new Date()},
                {id: 3, name: '保时捷', ctime: new Date()},
            ]
        },
        methods: {
            add(){
                var newCar = {id: this.id, name: this.name, ctime: new Date()};
                this.list.push(newCar);
                this.id = this.name = '';
            },
            del(id){
                this.list.some((item, i)=>{
                    if(item.id == id){
                        this.list.splice(i, 1);
                        return true;
                    }
                })
            },
            search(keywords){
               /* var newList = [];
                this.list.forEach(item=>{
                    if(item.name.indexOf(keywords) != -1 || keywords == ''){
                        newList.push(item);
                    }
                });
                return newList;*/

                return this.list.filter(item => {
                    if(item.name.includes(keywords)){
                        return item;
                    }
                })
            }

        }

    })
</script>
</html>